<div id="root">
    <qf-nav-bar 
    left-arrow
    @click-left="clickLeftFn"
    @click-right="clickRightFn"
    title="用户创建"></qf-nav-bar>

 
    <h1>表单组件</h1>
    <qf-table @submit="submitFn"></qf-table>

    <h1>按钮组件</h1>
    <qf-button type="primary" content="主要按钮"></qf-button>
    <qf-button type="info" content="信息按钮"></qf-button>
    <qf-button type="default" content="默认按钮"></qf-button>
    <qf-button type="warning" content="警告按钮"></qf-button>
    <qf-button type="danger" content="危险按钮"></qf-button>

    <h1>loading1组件</h1>
    <qf-loading1 :state="loading1state"></qf-loading1>
    <button @click="loading1state=true">显示loading</button>
    <button @click="loading1state=false">隐藏loading</button>

    <h1>loading2组件</h1>
    <!-- <qf-loading2 :state="loading2state" @close="data=>loading2state =data"></qf-loading2> -->
    <!-- <qf-loading2 :state="loading2state" @update:state="data=>loading2state =data"></qf-loading2> -->
    <qf-loading2 :state.sync="loading2state"></qf-loading2>
    <button @click="loading2state=true">显示loading</button>

    <h1>dialog</h1>
    <!-- <qf-dialog :visible="dialogstate" @close="data=>dialogstate=false" title="用户创建" content="<input type='text'>"></qf-dialog> -->
    <qf-dialog :visible.sync="dialogstate"  title="用户创建"><input type='text'></qf-dialog>
    <button @click="dialogstate=true">显示对话框</button>


    <h1>分页组件</h1>
    <!-- <qf-page :total="11" :page-size="2" @click.native="changePageFn"></qf-page> -->
    <qf-page :total="11" :page-size="2" @click-page="changePageFn"></qf-page>

    <h1>表格组件</h1>
    <qf-table2 :columns="usersColumns" :data="usersData"></qf-table2>
    <qf-table2 :columns="goodsColumns" :data="goodsData"></qf-table2>

    <h1>弹框组件</h1>
    <qf-tips :state="loading3state"><h1>请登录</h1></qf-tips>
    <button @click="loading3state=true">显示loading</button>
    <button @click="loading3state=false">隐藏loading</button>

    <h1>element表格组件</h1>
    <my-table3 :data="tableData">
        <my-table-column prop="id" label="编号1"></my-table-column>
        <my-table-column prop="id" label="编号2"></my-table-column>
        <my-table-column prop="name" label="姓名"></my-table-column>
        <my-table-column prop="age" label="年龄"></my-table-column>
        <my-table-column label="性别">
            <template slot-scope="item"> {{ item.sex == 1 ? '女' : '男' }} </template>
        </my-table-column>

    </my-table3>

</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="./qfui.css">
<script src="./qfui.js"></script>
<script>


const vm = new Vue({
    el: "#root",
    data: {
        tableData: [
        { id: 1, name: "王王", age: 65, sex: 2 },
        { id: 2, name: "李李", age: 21, sex: 2 },
        { id: 3, name: "六六", age: 33, sex: 1 },
        { id: 4, name: "七七", age: 32, sex: 1 },
      ],


        loading1state:false,
        loading2state:false,

        loading3state:false,


        dialogstate:false,
        usersColumns:[
            {title:"编号",key:'id'},
            {title:"姓名",key:'uname'},
            {title:"性别",key:'sex'},
        ],
        usersData:[
            {id:1,uname:'李一',sex:'男'},
            {id:1,uname:'王一',sex:'男'}
        ],
        goodsColumns:[
            {title:"编号",key:'id'},
            {title:"商品名称",key:'title'},
            {title:"价格",key:'price'},
        ],
        goodsData:[
            {id:1,title:'商品1',price:1.11},
            {id:2,title:'商品2',price:2.22},
            {id:3,title:'商品3',price:3.33}
        ]
    },
    methods:{
        
        changePageFn(pageNum){
            
        },
        clickLeftFn(){
            alert('clickLeftFn')
        },
        clickRightFn(){
            alert('clickRightFn')
        },


        submitFn(formData){
            alert('商品创建请求借口...')
        }
    }
})
</script>